<template>
  <div class="menu">
      <!-- <h5 class="mb-2">Custom colors</h5> -->
    <!-- active-text-color：当前选中菜单的文章颜色 -->
    <!-- default-active: 默认激活选中菜单的index，如果是嵌套的层级菜单必须使用子菜单指定的index -->
    <!-- text-color：默认菜单文字颜色 -->
    <!-- collapse：展开折叠菜单 true：展开，false：折叠 -->
    <!--  @open：菜单展开触发的方法 @close：菜单折叠触发的方法 -->
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      :default-active="defaultActive"
      text-color="#fff"
      :collapse="menuStore.menuBoo"
      @open="handleOpen"
      @close="handleClose"
      router
    >
     <el-menu-item :index="null">
        <MenuIcon name="Platform"/>
        <span>学知网后台管理系统</span>
      </el-menu-item>
    <template v-for="menu in menuList" :key="menu.id">
     
    <!-- index:菜单的唯一标志，设置路由之后可以指定页面跳转 -->
      <el-sub-menu :index="menu.path" v-if="menu.subMenu">
        <!-- 父级菜单 -->
        <template #title>
          <!-- 调用封装的公共组件 -->
          <MenuIcon :name="menu.icon"/>
          <span>{{ menu.title }}</span>
        </template>
        <!-- 子菜单 -->
        <el-menu-item :index="sub.path" v-for="sub in menu.subMenu" :key="sub.id">
          <MenuIcon :name="sub.icon"/>
          <span>{{ sub.title }}</span>
        </el-menu-item>
      </el-sub-menu>
      <!-- 菜单每一项 -->
      <el-menu-item :index="menu.path" v-else>
        <MenuIcon :name="menu.icon"/>
        <span>{{ menu.title }}</span>
      </el-menu-item>
    </template>

    </el-menu>
  </div>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
// 引入二次封装的图标
import MenuIcon from './MenuIcon.vue';
// 引入pinia的菜单仓库
import { useMenuStore } from '@/stores/menuCollapse'
import { useRoute } from 'vue-router';

const route = useRoute()
// 调用仓库方法
const menuStore = useMenuStore()
//默认菜单选中的路由地址是首页
const defaultActive = ref<string>("/")

// 监听当前路由地址
watch(() => route.path, (newVal) => {
  // console.log("path:", newVal);
  defaultActive.value = newVal
})

const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
// 定义菜单数据结构
const menuList = ref<Array<any>>([
{
  id: 1,
  title: "首页",
  icon: "Odometer",
  path: "/"
},
{
  id: 2,
  title: "讲师管理",
  icon: "Avatar",
  path: "/teacher",
  subMenu: [
  {
  id: 3,
  title: "讲师列表",
  icon: "Operation",
  path: "/list"
},
{
  id: 4,
  title: "添加讲师",
  icon: "Menu",
  path: "/add"
},
  ]
},
{
  id: 5,
  title: "课程分类管理",
  icon: "Memo",
  path: "/subject",
  subMenu: [
  {
  id: 6,
  title: "课程分类列表",
  icon: "List",
  path: "/subjectList"
},
{
  id: 7,
  title: "导入课程分类",
  icon: "Sell",
  path: "/import"
},
  ]
},
{
  id: 8,
  title: "课程管理",
  icon: "Sunset",
  path: "/coures",
  subMenu: [
  {
  id: 9,
  title: "课程列表",
  icon: "VideoPlay",
  path: "/courseList"
},
{
  id: 10,
  title: "添加课程",
  icon: "FolderAdd",
  path: "/info"
},
  ]
},
{
  id: 11,
  title: "轮播图管理",
  icon: "Switch",
  path: "/banner",
  subMenu: [
  {
  id: 12,
  title: "轮播图列表",
  icon: "CreditCard",
  path: "/bannerList"
},
{
  id: 13,
  title: "添加轮播图",
  icon: "Ship",
  path: "/bannerAdd"
},
  ]
},
{
  id: 14,
  title: "文章管理",
  icon: "Message",
  path: "/essay",
  subMenu: [
  {
  id: 15,
  title: "文章列表",
  icon: "Filter",
  path: "/essayList"
},
{
  id: 16,
  title: "添加列表",
  icon: "Comment",
  path: "/essayAdd"
},
  ]
},
{
  id: 17,
  title: "用户管理",
  icon: "User",
  path: "/user",
  subMenu: [
  {
  id: 18,
  title: "用户列表",
  icon: "Bell",
  path: "/userList"
},
{
  id: 19,
  title: "用户添加",
  icon: "Avatar",
  path: "/userAdd"
},
  ]
},
{
  id: 20,
  title: "订单管理",
  icon: "PictureRounded",
  path: "/order",
  subMenu: [
  {
  id: 21,
  title: "订单列表",
  icon: "Grape",
  path: "/orderList"
},
{
  id: 22,
  title: "订单添加",
  icon: "ShoppingCart",
  path: "/orderAdd"
},
  ]
},
{
  id: 23,
  title: "权限管理",
  icon: "CircleCheck",
  path: "/permission",
  subMenu: [
  {
  id: 18,
  title: "用户管理",
  icon: "Bell",
  path: "/userList"
},
{
  id: 25,
  title: "角色管理",
  icon: "Filter",
  path: "/prole"
},
  ]
},
])
</script>

<style scoped lang="less">
.menu{
  .el-menu{
      border-right: none;
  }
}
</style>